<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<base href="/managerSystem/view/">
		<!-- vue框架： 视图的双向绑定 -->
		<script type="text/javascript" src="js/vue-2.6.10.js"></script>
		<!--  axios: 进行异步请求（数据来源与网页脱离） -->
		<script type="text/javascript" src="js/axios.js"></script>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			.content{
				border: 0 solid;
				margin: 0;
				padding: 50px 0;
				width: 100%;
				background:#CDE3F0;
				}
			.content1{
				border: 0 solid;
				margin: 0 auto;
				width: 1500px;
				height: 850px;
				padding: 50px 0;
				background:white;
				border-radius: 20px;
			}
			.box{
				border: 0 solid;
				width: 500px;
				height:670px;
				margin:100px 0 ;
			}
			
			.box img{
				object-fit: fill;
				width: 500px;
				height:670px;
				border-radius: 20px;
			}
			.tp{
				border: 0 solid;
				width: 500px;
				height: 800px;
				background:white;
				float: left;
				padding:0 20px
			}
			.add{
				border: 0 solid;
				width: 900px;
				height: 800px;
				background: white;
				float:right;
				}
			h1{
				color:#CDE3F0;
			}
			.border{
				border:3px solid #CDE3F0;
				border-radius: 20px;
				width: 400px;
				background-color:#fffa;
				padding:auto;
				text-align:center;
				margin: auto;
				position: absolute;
				top: 30%;
				left: 50%;
			}
			p{
				margin: 10px;
			}
			a{
				text-decoration: none;
				color: #CDE3F0;
			}
		</style>
	</head>
	<body>
		<div class="content">
			<div class="content1">
				<div class="tp">
					<div class="box">
						<img src="images/updatecomm.jpg" alt="">
					</div>
				</div>
				<div class="add">
					<div class='border'>
						<h1>修改商品</h1>
							<form action="/managerSystem/updateCommodity.do" method="Post" id="app">
       							<label for="id">商品id：</label>
       							<input type="text" v-model='conn.id' name="id" required>
       							<br />
							    <label   for="name">商品名：</label>
							    <input    type="text"   v-model="conn.name"   name="name"   required>
								<br />
							    <label   for="producing_area">生产公司：</label>
							    <input    type=""   v-model="conn.producing_area"   name="producing_area"   required>
								<br />
								<label   for="market_price">价格：</label>
							    <input    type=""   v-model="conn.market_price"   name="descrption"   required>
								<br />
							    <label   for="descrption">介绍：</label>
							    <input    type=""   v-model="conn.descrption"   name="descrption">
							    <br />
							    <input    type="submit"   value="提交">
							</form>
					</div>
					<a href="index.html"><h1>返回</h1></a>
				</div>
				<script type="text/javascript">
           function parseUrlParams() {
                var url = window.location.href;
                var paramString = url.split('?')[1];
                var paramPairs = paramString.split('&');
                var params = {};
                paramPairs.reduce(function(params, pair) {
                    var parts = pair.split('=');
                    var key = parts[0];
                    var value = decodeURIComponent(parts[1] || '');
                    if (params[key]) {
                        params[key].push(value);
                    } else {
                        params[key] = [value];
                    }
                    return params;
                }, params);
                return params;
            }             
           let vue = new Vue({
                el: '#app',
                data:{
                    conn:{
                        name: '',
                        producing_area: '',
                        market_price: '',
                        descrption: '',
                        id: ''
                    }
                },
                created(){
                    params = parseUrlParams();
                    //url: 表示异步请求地址
                    axios.get('/managerSystem/selectCommodityById.do?id='+params.id[0]).then(
                        function(res_obj){
                            //使用获取的数据来给vue对象中的users数据赋值
                            vue.conn = res_obj.data; 
                        }
                    ).catch(
                        function(error_obj){
                            alert("网络加载异常！！！");
                        }
                    )
                }
            });
    </script>
			</div>
		</div>
	</body>
</html>